<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ws-client-demo</title>
<style>
  .envBox span{ padding-left: 6px; font-size:14;color: red;}
  .buttonBox button{ padding-left: 6px;line-height: 150%;}
  body{font-size: 12px;}
  .OutBox{overflow-y: scroll;width: 90%; height:250px;border: dashed red;}
</style>
  </head>
  <body>
    <h1>websocket-demo</h1>
    <div class="envBox">
      
    </div>
    <div class="buttonBox">
      <button id="ts01" >hello</button>
      <button id="tsCloseWs" >关闭ws</button>    
      <button id="tsLoadWs" >创建ws</button>
      <button id="tsSayHello" >hello-world.say</button>
      <button id="tsGetList" >discovery.getNetList</button>
    </div>

    <br>
    输入：<button id="tsSend" >发送</button>
    <br>

<textarea id="msgInput" rows="5" cols="60">{"jsonrpc":"2.0","method":"getVersion","params":"","id":199,"service":"service-global"}</textarea>
<br>
输出<br>

<div id="msgOutput" class="OutBox">
  output..
</div>
    <script lang="javascript">
    console.log("---------0000-----------");
var ws ;
var inputMsg = document.getElementById("msgInput");
var outMsg = document.getElementById("msgOutput");

function showLog(v){
    let date = new Date();
    let pre = "["+date.getHours() +":"+ date.getMinutes() +":"+date.getSeconds()+"]";
    v= pre+ v;
    console.log("log-back:",v);
    outMsg.innerHTML =v+ "<br>"+ outMsg.innerHTML ;
}

function loadWs(){
    let address = "ws://localhost:8080";
    console.log("loadWs:")
    ws = new WebSocket(address);

    ws.onopen = function(evt) { 
        console.log("Connection open ..."); 
        //ws.send('{"jsonrpc":"2.0","method":"getNetList","params":[],"id":0,"service":"discovery"}');
    };

    ws.onmessage = function(evt) {
        // console.log( "Received Message: " + evt.data);
        // ws.close();
        showLog("[back]"+evt.data)
    };

    ws.onclose = function(evt) {
        console.log("Connection closed.");
    }; 
}

function getList(){
    ws.send('{"jsonrpc":"2.0","method":"getNetList","params":[],"id":0,"service":"discovery"}');
}
function sayHello(){
    ws.send('{"jsonrpc":"2.0","method":"say","params":"liam","id":1,"service":"hello-world"}');
}

document.getElementById("ts01").addEventListener('click',function ()
{
    showLog("hello!");
}); 

document.getElementById("tsLoadWs").addEventListener('click',function ()
{
    loadWs();
});

document.getElementById("tsSayHello").addEventListener('click',function ()
{
    sayHello();
});

document.getElementById("tsGetList").addEventListener('click',function ()
{
    getList();
});

document.getElementById("tsCloseWs").addEventListener('click',function ()
{
    ws.close();
});

document.getElementById("tsSend").addEventListener('click',function ()
{
   var v = inputMsg.value ;
   ws.send(v);
});
    </script>
<br>
操作：点击"创建ws"->点击"hello-world.say"
<br>
注意：
<br>1.要关闭防火墙；
  </body>
</html>
